<template>
    <div class='projectFillDetails'>
        <navbarW></navbarW>
        <!-- 项目详情 -->
        <div class='container'>
            <el-breadcrumb class='breadcrumb' separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/www' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/filmprograms' }">影视项目</el-breadcrumb-item>
                <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
            </el-breadcrumb>

            <!-- top -->
            <div class='projectTop'>
                <div class='imgBox'>
                    <img :src="detailsData.info.coverImage" alt="">
                </div>
                <div class='textContent'>
                    <ul>
                        <li>
                            <h2><b>{{name}}</b>

                                <div class="text">
                                    <span>{{getMovieType()}}</span>
                                    <span>{{getMovieStatus()}}</span>
                                </div>
                                
                            </h2>
                        </li>
                        <li>
                            <span>出品方：</span>
                            <span>{{getproducer()}}</span>
                        </li>
                        <li>
                            <span>融资进度：</span>
                             <el-progress class='progress' :text-inside="true" :stroke-width="18" :percentage="getPercentage()" color="#ff1268"></el-progress>
                        </li>
                        <li>
                             <a @click='getSubScription' class='more' href="javascript:;">我要认购</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- main -->
            <div class='main'>
                <el-tabs class='tabs' type="border-card">
                    <el-tab-pane label="项目介绍">
                        <div class='contentIntro' v-html='this.detailsData.info.content'></div>
                    </el-tab-pane>
                    <el-tab-pane label="电子合同">
                        <!-- <div class='contentIntro' v-html='this.detailsData.info.contractDetail'></div> -->
                        <p class='hetong'>温馨提示：请下载手机App查看</p>
                    </el-tab-pane>
                </el-tabs>
                <div class='tabs'>
                    <h3><i class='iconfont icon-lingxing'></i>关注微信公众号</h3>
                    <div class='imgBox'>
                        <img src="../../assets/image/qrcode.jpg" alt="">
                    </div>
                </div>
                

            </div>
        </div>

        <fillInformation></fillInformation>
        <footerBottom></footerBottom>
        <subscription ref='subscription'></subscription>
    </div>
</template>


<script>
import navbarW from './components/navbarW';
import fillInformation from './components/fillInformation';
import footerBottom from './components/footer';
import subscription from './components/subscription';
import { ajax } from "@/api";
export default {
    name:'projectFillDetails',
    data(){
        return {
            status:false,
            params: {
                movieId: '',
            },
            name:'',
            title:'',
            detailsData:{
                info:{
                    coverImage:''
                }
            },
            salesOfMoney:'',
            userList:{}
        }
    },
    methods:{
        getSubScription(){
            this.$refs.subscription.openStatus();
            // this.status = true;
        },
        //影视详情
        getDetails(){
            this.params.movieId = this.$route.params.movieId;
            ajax('movieDetail', this.params).then((json) => {
                if(json.data.code === 200){
                    this.name = json.data.data.info.title;
                    this.salesOfMoney = json.data.salesOfMoney;
                    this.detailsData = json.data.data;
                    this.userList = json.data.user;
                    
                }
            })
        },
        //发行商
        getproducer(){
            return this.userList.name;
        },
        getMovieType(){
            if(this.detailsData){
                return this.detailsData.type.text;
            }
        },  
        getMovieStatus(){
            if(this.detailsData){
                return this.detailsData.releaseStatus.text;
            }
        },
        getPercentage(){
            console.log(this.detailsData);
            return  this.getScale(this.salesOfMoney, this.detailsData.totalOfMoney);
        },
        //百分比
        getScale(num, total) {
            num = parseFloat(num);
            total = parseFloat(total);
            // if (isNaN(num) || isNaN(total)) {
            //   return "-";
            // }
            return total <= 0 ? 0 : Math.round((num / total) * 10000) / 100.0;
        },
    },
    mounted(){
        this.getDetails();
    },
    components:{
        navbarW,
        fillInformation,
        footerBottom,
        subscription
    }
}
</script>


<style lang="less">
.projectFillDetails{
    background: #f4f4f4;
    .container{
        padding-top: 7rem;
        width: 990px;
        min-width: 990px;
        margin: 0 auto;
        .breadcrumb{
            margin: 2rem 0 1rem 0;
        }
        .projectTop{
            width: 100%;
            background: #fff;
            border: 1px solid #f4f4f4;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0,0,0,.04);
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            border-radius: 13px;
            .imgBox{
                width: 50%;
                height: 250px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .textContent{
                width: 50%;
                ul{
                    line-height: 2rem;
                    padding: 1rem 4rem;
                    li{
                        h2{
                            font-weight: 400;
                            font-size: 30px;
                            color: rgba(16, 16, 16, 1);
                            margin: 0;
                            display: flex;
                            flex-wrap: wrap;
                            b{
                                font-weight: 400;
                                display: inline-block;
                                margin-top: 1rem;
                                margin: 1rem 1rem 0 0;
                            }
                            .text{
                                padding: .8rem 0 0 0;
                                span{
                                    padding: .3rem .5rem;
                                    color: #fff;
                                    font-size: 13px;
                                    border-radius: 50px;
                                }
                                span:first-child{
                                    background: rgba(255, 152, 0, 1);
                                    margin-left: .2rem;
                                    color: #fff;
                                }
                                span:last-child{
                                    background: #ff1268;
                                    color: #fff;
                                }
                            }
                            
                        }
                    }
                    li{
                        span:first-child{
                            color: #ff1268;
                        }
                        span:last-child{
                            color: #000;
                        }
                        .progress{
                            width: 90%;
                        }
                    }
                    li:nth-child(3){
                        span{
                            display: inline-block;
                            margin-bottom: .5rem;
                        }
                    }
                    li:last-child{
                        text-align: center;
                        line-height: initial;
                    }
                }
            }
        }
        .contentIntro{
            img{
                width: 100%;
                height: 100%;
            }
        }
        .more{
            display: inline-block;
            padding: .5rem 2.5rem;
            margin: 3em 0 0 0;
            background: #ff1268;
            color: #fff;
            text-align: center;
            border-radius: 50px;
        }
    }

    .main{
        width: 990px;
        min-width: 990px;
        margin: 4rem auto;
        display: flex;
        .tabs:first-child{
            width: 80%;
            margin-right: 3rem;
        }

        .tabs:last-child{
            width: 20%;
            height: 14.5rem;
            background: #fff;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
            .iconfont{
                font-size: 1rem;
                color: #ff1268;
                margin-right: .5rem;
            }
            
            h3{
                font-weight: 400;
                font-size: 15px;
                padding-left: 1rem;
            }
            .imgBox{
                width: 154px;
                height: 164px;
                margin: 0 auto 1rem auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .hetong{
                text-align: center;
                margin: 4rem 0;
            }
    }
}
</style>
